import React, { Component } from 'react';
import { Input, TimePicker, Button, Icon } from 'antd';
import cass from 'classnames'
import moment from 'moment';
import DatePicker from '../DatePicker';
import s from './index.module.less';

class TaskTimeSelect extends Component {

	static defaultProps = {
		value: new Date(),
		marks: [],
    }

	constructor(props) {
		super(props);
		const { value: date, marks } = props;
		const mark = marks.find(v => moment(date).format('YYYY-MM-DD') === v.taskbegintime);
        this.state={
            date, // Date对象，不可以是moment对象
			marks: marks.map(v => ({ ...v, mark: new Date(v.taskbegintime) })),
			tasks: mark ? mark.tasks : [],
			defaultDate: date,
        }
	}
	
	componentWillReceiveProps(nextProps){
		const { value: date, marks } = nextProps;
		const mark = marks.find(v => moment(date).format('YYYY-MM-DD') === v.taskbegintime);
		this.setState({
            date,
			marks: nextProps.marks.map(v => ({ ...v, mark: new Date(v.taskbegintime) })),
			tasks: mark ? mark.tasks : [],
			defaultDate: date,
        })
	}

	onTimeChange = (time) => {
		const { date } = this.state;
		const timeStr = time ? moment(time).format('HH:mm') : moment().format('HH:mm');
		this.setState({ date: new Date(`${moment(date).format('YYYY-MM-DD')} ${timeStr}`)})
	}

	onOpen = () => {
		this.setState({ show: !this.state.show });
	}
	
	onCancel = () => {
		// 隐藏datepicker和设置回默认值
		this.setState({ show: false, date: this.state.defaultDate });
	}

	onChange = (newDate, isPre) => { // isPre判断是否是当前日期之前的，之前的不可以选择
		const { marks } = this.state;
		const mark = marks.find(v => moment(newDate).format('YYYY-MM-DD') === v.taskbegintime);
		let tasks = [];
		let date = this.state.date;
		if(mark){
			tasks = mark.tasks;
		}
		if(!isPre) date = newDate;
		this.setState({ date, tasks });
	}

	today = () => {
		this.onChange(new Date(), false);
	}

	onSure = () => {
		const { onOk } = this.props;
		const { date } = this.state;
		onOk(moment(date).format('YYYY-MM-DD HH:mm:ss' ));
		this.onCancel();
	}

	disableTime = (key) => {
		const { date } = this.state;
		if(moment().format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD')) {
			const time = moment().format('HH:mm').split(':');
			const selTime = moment(date).format('HH:mm').split(':')
			const arr = [];
			if(key === 0 || (key === 1 && time[0] === selTime[0])) {
				for(let i = 0; i < (time[key] - 0); i++){
					arr.push(i);
				}
			}
			return arr;
		}
		return [];
	}

	render() {
		const { showToday } = this.props;
		const { date, marks, show, tasks } = this.state;

		let newTasks = tasks;
		if(newTasks.length){
			newTasks = newTasks.sort((a, b) => {
				return moment(a.taskbegintime).format('X') - moment(b.taskbegintime).format('X');
			});
		}

		return (
			<div className={s.datePicker}>
				<Input
					value={moment(date).format('YYYY-MM-DD dddd HH:mm')}
					suffix={<Icon type="down" style={{ color: 'rgba(0,0,0,.25)' }} />}
					onClick={this.onOpen}
				/>
				<div className={cass(s.selector, {
					[s.active]: show
				})}>
					<DatePicker onChange={this.onChange} value={date} marks={marks} />
					<div className={s.wrapTime}>
						<span className={s.label}>任务开始时间: </span>
						<TimePicker
							value={moment(date)}
							onChange={this.onTimeChange}
							format={'HH:mm'}
							placeholder=""
							disabledHours={() => this.disableTime(0)}
							disabledMinutes={() => this.disableTime(1)}
						/>
						{showToday && (
							<div className={s.btn}>
								<Button onClick={this.today} type="primary" size="small">今天</Button>
							</div>
						)}
					</div>
					{newTasks.length ? (
						<div className={s.wrapContent}>
							<span className={s.label}>任务列表</span>
							<div className={s.content}>
								{newTasks.map(t => (
									<div key={t.taskid} className={cass('hovergray', s.tTtem)}>
										<div>{moment(t.taskbegintime).format('HH:mm')}</div>
										<div>{t.taskcontent}</div>
									</div>
								))}
							</div>
						</div>
					) : null}
					<div className={s.footer}>
						<Button onClick={this.onCancel}>取消</Button>
						<Button type="primary" onClick={this.onSure}>确定</Button>
					</div>
				</div>
			</div>
		);
	}
}
export default TaskTimeSelect;
